<!--订单开票信息 -->
<template>
	<div class="contact">
		<div class="makemsg">
			<div class="ointrpers-name">开票信息</div>
			<div class="makemsg-fun flex">
				<div class="makemsgfeach curpoin" v-if="roleId != 5 && roleId != 3 && orderdatamsg.invoice_img"
					@click="isfpmsg=true;">
					<span class="makemsgfeachicon el-icon-view mainColor"></span>
					<span class="makemsgfeachtxt mainColor">预览发票</span>
				</div>
				<div class="makemsgfeach curpoin" v-if="roleId != 5 && roleId != 3 && orderdatamsg.invoice_img"
					@click="downloadfun(orderdatamsg.invoice_img,'订单发票')">
					<span class="makemsgfeachicon el-icon-download mainColor"></span>
					<span class="makemsgfeachtxt mainColor">下载发票</span>
				</div>
				<div class="makemsgfeach curpoin" @click="openeditfun()"
					v-if="roleId != 5 && roleId != 3 && !orderdatamsg.invoice_img">
					<span class="makemsgfeachicon el-icon-document mainColor"></span>
					<span class="makemsgfeachtxt mainColor">修改发票信息</span>
				</div>
			</div>
			<div class="ointrpers-msg flex" v-if="orderdatamsg.is_invoice == 1">
				<div class="ointrpers-msgl">
					<div class="ointrpersEach flex">
						<div class="ointrpersTitle">订单编号：</div>
						<div class="ointrpersMsg">{{ orderdatamsg.order_sn }}</div>
					</div>
					<div class="ointrpersEach flex">
						<div class="ointrpersTitle">订单名称：</div>
						<div class="ointrpersMsg">{{ orderdatamsg.order_name }}</div>
					</div>
					<div class="ointrpersEach flex">
						<div class="ointrpersTitle">开票对应公司：</div>
						<div class="ointrpersMsg">{{ orderdatamsg.invoice_company }}</div>
					</div>
					<div class="ointrpersEach flex" v-if="roleId != 5">
						<div class="ointrpersTitle">开票金额：</div>
						<div class="ointrpersMsg">{{ orderdatamsg.invoice_amount }}</div>
					</div>
					<div class="ointrpersEach flex">
						<div class="ointrpersTitle">开票公司信息：</div>
						<div class="ointrpersMsg">{{ orderdatamsg.invoice_company_info }}</div>
					</div>
					<div class="ointrpersEach flex">
						<div class="ointrpersTitle">注册地址：</div>
						<div class="ointrpersMsg">{{ orderdatamsg.invoice_address }}</div>
					</div>
				</div>
				<div class="ointrpers-msgr">
					<div class="ointrpersEach flex">
						<div class="ointrpersTitle">税号：</div>
						<div class="ointrpersMsg">{{ orderdatamsg.invoice_no }}</div>
					</div>
					<div class="ointrpersEach flex">
						<div class="ointrpersTitle">联系电话：</div>
						<div class="ointrpersMsg">{{ orderdatamsg.invoice_tel }}</div>
					</div>
					<div class="ointrpersEach flex">
						<div class="ointrpersTitle">开户行：</div>
						<div class="ointrpersMsg">{{ orderdatamsg.invoice_bank }}</div>
					</div>
					<div class="ointrpersEach flex">
						<div class="ointrpersTitle">开户行行号：</div>
						<div class="ointrpersMsg">{{ orderdatamsg.invoice_bank_code }}</div>
					</div>
					<div class="ointrpersEach flex">
						<div class="ointrpersTitle">银行账号：</div>
						<div class="ointrpersMsg">{{ orderdatamsg.invoice_bank_card }}</div>
					</div>
				</div>
			</div>
		</div>
		<el-dialog id="createorder" title="修改发票信息" :visible.sync="editinvoiceis" width="432px" top="70px"
			:before-close="replaceClosefun" :modal-append-to-body="false">
			<div>
				<div class="eyeach flex" v-if="orderdatamsg.is_invoice != 1">
					<p class="eyeachtitle">开票信息：</p>
					<div class="eyeachr">
						<el-select style="width:100%;" v-model="invoiceacname" placeholder="请选择" @change="invoiceacfun">
							<el-option v-for="(item,index) in invoicedata" :key="index" :label="item.name"
								:value="item.id">
							</el-option>
						</el-select>
					</div>
				</div>
				<div class="eyeach flex">
					<p class="eyeachtitle">开票对应公司：</p>
					<div class="eyeachr">
						<el-input class="eyeachrinput" v-model="invoice_company" placeholder="请输入开票对应公司"></el-input>
					</div>
				</div>
				<div class="eyeach flex">
					<p class="eyeachtitle">开票金额：</p>
					<div class="eyeachr">
						<el-input class="eyeachrinput" v-model="invoice_amount" placeholder="请输入开票金额"></el-input>
					</div>
				</div>
				<div class="eyeach flex">
					<p class="eyeachtitle">开票公司信息：</p>
					<div class="eyeachr">
						<el-input class="eyeachrinput" v-model="invoice_company_info"
							placeholder="请输入开票公司信息"></el-input>
					</div>
				</div>
				<div class="eyeach flex">
					<p class="eyeachtitle">开票人姓名：</p>
					<div class="eyeachr">
						<el-input class="eyeachrinput" v-model="invoice_name" placeholder="请输入开票人姓名"></el-input>
					</div>
				</div>
				<div class="eyeach flex">
					<p class="eyeachtitle">税号：</p>
					<div class="eyeachr">
						<el-input class="eyeachrinput" v-model="invoice_no" placeholder="请输入税号"></el-input>
					</div>
				</div>
				<div class="eyeach flex">
					<p class="eyeachtitle">注册地址：</p>
					<div class="eyeachr">
						<el-input class="eyeachrinput" v-model="invoice_address" placeholder="请输入注册地址"></el-input>
					</div>
				</div>
				<div class="eyeach flex">
					<p class="eyeachtitle">联系电话：</p>
					<div class="eyeachr">
						<el-input class="eyeachrinput" v-model="invoice_tel" placeholder="请输入联系电话"></el-input>
					</div>
				</div>
				<div class="eyeach flex">
					<p class="eyeachtitle">开户行：</p>
					<div class="eyeachr">
						<el-input class="eyeachrinput" v-model="invoice_bank" placeholder="请输入开户行"></el-input>
					</div>
				</div>
				<div class="eyeach flex">
					<p class="eyeachtitle">开户行行号：</p>
					<div class="eyeachr">
						<el-input class="eyeachrinput" v-model="invoice_bank_code" placeholder="请输入开户行行号"></el-input>
					</div>
				</div>
				<div class="eyeach flex">
					<p class="eyeachtitle">银行账号：</p>
					<div class="eyeachr">
						<el-input class="eyeachrinput" v-model="invoice_bank_card" placeholder="请输入银行账号"></el-input>
					</div>
				</div>
			</div>
			<div class="replacebtn" style="margin-top:20px;">
				<el-button class="replacebtneach" style="background-color:#999999;"
					@click="editinvoiceis=false">取消</el-button>
				<el-button class="replacebtneach mainbg" @click="editinvoicefun()">提交</el-button>
			</div>
		</el-dialog>
		<!-- <el-dialog  :close-on-click-modal="false"
		  title="投诉"
		  :visible.sync="plaintis"
		  width="432px"
		  top="100px"
		  :before-close="replaceClosefun"
		  :modal-append-to-body="false">
			<div class="plaintis">
				<textarea class="plaintistxt" v-model="plainttxt" placeholder="请输入投诉信息" maxlength="9999"></textarea>
			</div>
		   <div class="replacebtn">
			   <el-button class="replacebtneach" style="background-color:#999999;" @click="plaintis=false">取消</el-button>
			   <el-button class="replacebtneach mainbg" @click="plaintenterfun()">提交</el-button>
		   </div>
		</el-dialog> -->
		<el-dialog title="发票" 
			:modal="false"
			:visible.sync="isfpmsg" 
			width="850px" top="40px"
			:before-close="replaceClosefun" 
			:modal-append-to-body="false">
			<!-- <img style="width:400px;" :src="apifun.URLimg + orderdatamsg.invoice_img" alt="发票" /> -->
			<PdfViewer v-if="isfpmsg" :pdfUrl="apifun.URLimg + orderdatamsg.invoice_img" style="width: 800px;"></PdfViewer>
		</el-dialog>
	</div>
</template>

<script>
	import PdfViewer from './PdfViewer.vue';
	import {
		getFileSize,
		getFileExtImg,
		download
	} from "@/utils/file";
	export default {
		components: {
			PdfViewer
		},
		props: ['orderdatamsg'],
		data() {
			return {
				roleId: '',
				editinvoiceis: false,
				invoicedata: [{
					name: "不开票",
					id: "0"
				}, {
					name: "开票",
					id: "1"
				}],
				invoiceacname: '',
				invoiceacid: '', // 开票信息
				invoice_company: '', // 开票对应公司 （下面开票信息部分）
				invoice_amount: '',
				invoice_company_info: '',
				invoice_name: '',
				invoice_no: '',
				invoice_address: '',
				invoice_tel: '',
				invoice_bank: '',
				invoice_bank_code: '',
				invoice_bank_card: '',
				isfpmsg: false
			}
		},
		mounted() {
			this.roleId = this.$store.state.roleId;
			console.log(this.orderdatamsg)
		},
		methods: {
			editinvoicefun() {
				let sendData = {
					id: this.orderdatamsg.id,
					is_invoice: this.invoiceacid, // 开票信息 0不开  1开
					invoice_company: this.invoice_company,
					invoice_amount: this.invoice_amount,
					invoice_company_info: this.invoice_company_info,
					invoice_name: this.invoice_name,
					invoice_no: this.invoice_no,
					invoice_address: this.invoice_address,
					invoice_tel: this.invoice_tel,
					invoice_bank: this.invoice_bank,
					invoice_bank_code: this.invoice_bank_code,
					invoice_bank_card: this.invoice_bank_card,
					mobile: this.invoice_tel
				}
				// console.log(sendData)
				this.apifun.$post('/pc/order/editInvoiceInfo', sendData).then((res) => {
					// console.log(res)
					if (res.code == 200) {
						this.$message({
							message: '修改成功',
							type: 'success'
						});
						this.editinvoiceis = false;
						this.$emit('getorderxqfun', '');
					}
				})
			},

			openeditfun() {
				this.editinvoiceis = true;
			},
			invoiceacfun(e) {
				this.invoiceacid = e;
			},
			replaceClosefun() {
				this.editinvoiceis = false;
				this.isfpmsg = false;
				
			},
			downloadfun(src,name){
				download(src,name)
			}
		}
	}
</script>

<style scoped lang="scss">
	// 开票信息
	.makemsg {
		position: relative;
		width: 94%;
		padding: 10px;
		background-color: #fff;
		border-radius: 10px;
		margin: 10px auto;

		.makemsg-fun {
			position: absolute;
			right: 10px;
			top: 10px;
			line-height: 30px;

			.makemsgfeach {
				margin-left: 20px;

				.makemsgfeachicon {
					font-size: 16px;
				}

				.makemsgfeachtxt {
					font-size: 14px;
					margin-left: 5px;
				}
			}
		}

		.ointrpers-name {
			line-height: 30px;
			color: #333333;
			font-size: 16px;
			font-weight: bold;
		}

		.ointrpers-msg {
			margin-top: 10px;

			.ointrpers-msgl,
			.ointrpers-msgr {
				width: 50%;

				.ointrpersEach {
					padding: 8px 0;

					.ointrpersTitle {
						width: 100px;
						line-height: 20px;
						color: #999999;
						font-size: 14px;
					}

					.ointrpersMsg {
						width: 65%;
						line-height: 20px;
						color: #333333;
						font-size: 14px;
					}
				}
			}
		}
	}

	.replacebtn {
		margin-top: 30px;
		display: flex;
		justify-content: flex-end;

		.replacebtneach {
			width: 130px;
			height: 50px;
			border-radius: 10px;
			color: #fff;
			font-size: 16px;
			margin-left: 25px;
		}
	}

	// --编辑发票
	.eyeach {
		justify-content: space-between;

		.eyeachtitle {
			line-height: 30px;
			color: #333333;
			font-size: 14px;
		}

		.eyeachr {
			width: 75%;
			line-height: 30px;

			.eyeachrinput {
				height: 30px;
				line-height: 30px;
			}

			.eyeachrneed {
				width: 85%;
				height: 80px;
				padding: 10px;
				border-radius: 5px;
				border: none;
				outline: none;
				resize: none;
				line-height: 16px;
				background-color: #F7F7F7;
				color: #333;
				font-size: 12px;
			}
		}
	}
</style>